<template>
<div>
	<div class="bigtitle">
		<div class="bigtitle-title">我的积分</div>
	</div>
	<div pd2 bd-gray4 mgt2>
		<p>
			<span>会员级别：</span>
			<span>{{selfLevel.displayName}}（{{selfLevel.name}}）</span>
		</p>
		<p mgt2>
			<span>积分余额：</span>
			<span blue sz3>{{member.xpValue}}</span>
		</p>
	</div>

	<div class="bigtitle" mgt5>
		<div class="bigtitle-title">积分记录</div>
	</div>
	<table class="minitable" mgt2 long>
		<tr text-left>
			<th>日期</th>
			<th>积分变化</th>
			<th>来源/用途</th>
		</tr>
		<tr v-for="(item, index) in xpLogs" :key="index">
			<td w8>{{formatTimeStr(item.creationTime)}}</td>
			<td w7>{{item.changeValue > 0 ? '+' : ''}}{{item.changeValue}}</td>
			<td>{{item.description}}</td>
		</tr>
	</table>

    <AutoPage :value="page" text-right mgt2></AutoPage>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'
import AutoPage from '@common/components/AutoPage';

@Component({
    components: { AutoPage }
})
export default class MyXP extends AbpBase{
	get page() {
		return this.$store.state.self.xpLogPage;
	}
	get xpLogs() {
		return this.page.items;
	}
	get member() {
		return this.$store.state.self.member;
	}
	get memberLevels() {
		return this.$store.state.setting.settings.memberLevels;
	}
	get selfLevel() {
		return this.memberLevels.find(elem => elem.level == this.member.level) || {};
	}
	async created() {
	}
}
</script>
